<template>
  <div class="beijing">
    <p class="dingdan">课程订单</p>

    <el-tabs class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="已支付">
        <!--  -->
        <el-table
          ref="multipleTableRef"
          :data="
            data.slice((currentPage2 - 1) * pageSize2, currentPage2 * pageSize2)
          "
          style="width: 100%"
          class="biaoge"
          cell-click="“xiangqing”"
        >
          <el-table-column type="selection" />
          <el-table-column property="id" label="订单编号" />
          <el-table-column property="name" label="课题名称" />
          <el-table-column property="vxname" label="微信昵称" />
          <el-table-column property="course" label="课程列表">
            <template v-slot="">
              <img
                src="../../../assets/images/1.jpg"
                alt=""
                wedth="120"
                height="40"
                padding-top="10"
              />
            </template>
          </el-table-column>
          <el-table-column property="discount" label="优惠券" />
          <el-table-column property="money" label="实付金额" />
          <el-table-column property="state" label="订单状态">
            <span style="color: #fb837c">已支付</span>
          </el-table-column>

          <el-table-column property="date" label="下单时间" />

          <el-table-column property="dingdan" label="操作">
            <template #default="scope"
              ><span @click="xiangqing(scope.row.id)" class="dingdans"
                >订单详情</span
              ></template
            >
          </el-table-column>
        </el-table>
        <!--  -->
        <div class="demo-pagination-block">
          <el-pagination
            :currentPage="currentPage2"
            :page-size="pageSize2"
            :page-sizes="[7, 10, 14, 18]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="sizes, prev, pager, next"
            :total="data.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <!-- ----------待支付---------- -->
      <el-tab-pane label="待支付">
        <el-table
          ref="multipleTableRef"
          :data="
            data2.slice(
              (currentPage2 - 1) * pageSize2,
              currentPage2 * pageSize2
            )
          "
          style="width: 100%"
          class="biaoge"
        >
          <el-table-column type="selection" />
          <el-table-column property="id" label="订单编号" />
          <el-table-column property="name" label="课题名称" />
          <el-table-column property="vxname" label="微信昵称" />
          <el-table-column property="course" label="课程列表">
            <template v-slot="">
              <img
                src="../../../assets/images/1.jpg"
                alt=""
                wedth="120"
                height="40"
                padding-top="10"
              />
            </template>
          </el-table-column>
          <el-table-column property="discount" label="优惠券" />
          <el-table-column property="money" label="实付金额" />
          <el-table-column property="state" label="订单状态">
            <span style="color: #f5943e">待支付</span>
          </el-table-column>
          <el-table-column property="date" label="下单时间" />
          <el-table-column property="dingdan" label="操作">
            <template #default="scope"
              ><span @click="xiangqing(scope.row.id)" class="dingdans"
                >订单详情</span
              ></template
            >
          </el-table-column>
        </el-table>
        <!--  -->
        <div class="demo-pagination-block">
          <el-pagination
            :currentPage="currentPage2"
            :page-size="pageSize2"
            :page-sizes="[7, 10, 14, 18]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="sizes, prev, pager, next"
            :total="data2.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <!-- ----------已关闭---------- -->
      <el-tab-pane label="已关闭">
        <el-table
          ref="multipleTableRef"
          :data="
            data3.slice(
              (currentPage2 - 1) * pageSize2,
              currentPage2 * pageSize2
            )
          "
          style="width: 100%"
          class="biaoge"
        >
          <el-table-column type="selection" />
          <el-table-column property="id" label="订单编号" />
          <el-table-column property="name" label="课题名称" />
          <el-table-column property="vxname" label="微信昵称" />
          <el-table-column property="course" label="课程列表">
            <template v-slot="">
              <img
                src="../../../assets/images/1.jpg"
                alt=""
                wedth="120"
                height="40"
                padding-top="10"
              />
            </template>
          </el-table-column>
          <el-table-column property="discount" label="优惠券" />
          <el-table-column property="money" label="实付金额" />
          <el-table-column property="state" label="订单状态">
            <span style="color: #999999">已关闭</span>
          </el-table-column>

          <el-table-column property="date" label="下单时间" />
          <el-table-column property="dingdan" label="操作">
            <template #default="scope"
              ><span @click="xiangqing(scope.row.id)" class="dingdans"
                >订单详情</span
              ></template
            >
          </el-table-column>
        </el-table>
        <!--  -->
        <div class="demo-pagination-block">
          <el-pagination
            :currentPage="currentPage2"
            :page-size="pageSize2"
            :page-sizes="[7, 10, 14, 18]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="sizes, prev, pager, next"
            :total="data3.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import service from "../../../mock/index";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const tableData = ref([]);
    const currentPage2 = ref(1);
    const pageSize2 = ref(7);
    const small = ref(false);
    const background = ref(false);
    const disabled = ref(false);
    const data = ref([]);
    const data2 = ref([]);
    const data3 = ref([]);

    const total = ref(200); //默认数据总数
    const handleSizeChange = (size) => {
      pageSize2.value = size;
    };
    const handleCurrentChange = (page) => {
      currentPage2.value = page;
    };
    const xiangqing = (row) => {
      router.push({ path: "/order/details/" + row });
    };

    onMounted(() => {
      console.log(123);
      service.getDate().then((res) => {
        tableData.value = res.data.data;
        console.log(res);
        tableData.value.forEach((itme) => {
          if (itme.state == "已支付") {
            data.value.push(itme);
          } else if (itme.state == "待支付") {
            data2.value.push(itme);
          } else {
            data3.value.push(itme);
          }
        });
      });
    });

    return {
      tableData,
      currentPage2,
      pageSize2,
      small,
      background,
      disabled,
      data,
      data2,
      data3,
      total,
      router,
      xiangqing,
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>

<style lang="less" scoped>
.beijing {
  background: #fff;
}
.dingdan {
  padding: 4px;
  height: 30px;
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  background-color: #f4f5f7;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
/deep/.is-top::after {
  display: none;
}

/deep/ .el-tabs__item {
  width: 100px;
  padding: 0;
  text-align: center;
}
.demo-pagination-block {
  height: 70px;
  display: flex;
  justify-content: flex-end;
}
/deep/.cell {
  text-align: center;
  // height: 40px;
}
.dingdans {
  color: #598cff;
  cursor: pointer;
}
</style>
